<template>
	<view class="list_wrapper">
		<view class="list_wrap" v-if="list && list.length">
			<view class="item" v-for="item in list" :key="item.id" @click="handleToDetail(item)">
				<view class="item_top">
					<image :lazy-load="true" :src="img_baseUrl +item.imgPath" mode="aspectFill"></image>
					<!-- <view class="item_title"><text>{{item.title}}</text> </view> -->
					<view class="item_bot">
					  <view class="name"> {{ item.title }}</view>
					  <view class="adr" >
					    <image :src="`${img_baseUrl}/statics/std/static/loc-attractions.png`"></image>
					    <!-- <view class="adr-txt">{{item.dis}}</view> -->
					    <view class="adr-txt">{{item.dis}}</view>
					  </view>
					</view>
				</view>
			</view>
		</view>
		<view class="noData" v-else>
			<image :src="`${img_baseUrl}/statics/std/static/noData.png`"></image>
			<text>暂无数据</text>
		</view>
	</view>
  <!-- <view class="attractions-page">
    <view class="list_wrap" v-if="list && list.length">
      <view
        class="item"
        v-for="item in list"
        :key="item.id"
        @click="handleToDetail(item)"
      >
        <view class="item_top">
          <image
            :lazy-load="true"
            :src="img_baseUrl + item.imgPath"
            mode="aspectFill"
          ></image>
        </view>
        <view class="item_bot">
          <view class="name"> {{ item.title }}</view>
          <view class="adr" >
            <image :src="`${img_baseUrl}/statics/std/static/loc-attractions.png`"></image>
            <view class="adr-txt">12公里</view>
          </view>
        </view>
      </view>
    </view>
    <view class="noData" v-if="list && list.length === 0">
      <image :src="`${img_baseUrl}/statics/std/static/noData.png`"></image>
      <text>暂无数据</text>
    </view>
  </view> -->
</template>

<script>
import { requestGet } from "@/utils/request.js";
import {currentPosition, distance} from '@/utils/index.js';

// const list = [...Array(8).keys()].map(i => {
//     return {
//         id: i,
//         title: "深秋游览生态岛，注意事项" + 'i',
//         km: 10 + i,
//         banner: `https://picsum.photos/200/300?random=${i}`,
//     }
// })

export default {
  data() {
    return {
      img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
      list: null,
      current: 1,
      total: 0,
      loadAll: false, // 已加载全部
      keyId: 0,
	  myPosition: {}
    };
  },
  components: {},
  mounted() {
	this.getCurrentPos()
	this._getList();
  },
  methods: {
	  async getCurrentPos(){
	     try {
	       this.myPosition = await currentPosition();
	     } catch (error) {
	       console.log('定位失败:', error);
	       return 
	     }
	  },
    handleToDetail(item) {
		if (item.linkUrl) {
			uni.navigateTo({
			  url: item.linkUrl,
			});
			return
		} 
      uni.navigateTo({
        url: `/page_index/attractions/detail?id=${item.id}`,
      });
    },
    async _getList() {
      const res = await requestGet(
        "/home/content/list",
        {
          channelId: 8,
          pageNum: this.current,
          pageSize: 10,
        },
        "/baseplatform"
      )
	  if (res.code === 200) {
	    this.total = res.total;
		if(this.myPosition.latitude && this.myPosition.longitude && res.rows && res.rows.length){
			res.rows.map(val => {
				distance(this.myPosition.latitude, this.myPosition.longitude,val.latitude,val.longitude).then(distance => {
				  console.log("distance========", distance)
				  this.$set(val, 'dis', Number(distance) > 1000 ? (Number(distance)/1000).toFixed(1) + 'km' : distance + 'm')
				}).catch(err => {
				  console.log("distance========err", res)
				  this.$set(val, 'dis', '暂未获得位置信息')
				})
			})
		  
		}
		console.log('this.res.rows', res.rows)
	    this.list =
	      this.current === 1 ? res.rows : this.list.concat(res.rows);
	    this.keyId++;
		console.log('this.list', this.list)
	  }
	  
        // .then((res) => {
          
        // })
        // .catch((err) => console.log("错误了", err));
    },
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.list?.length < this.total) {
      this.current = this.current + 1;
      this._getList();
    } else {
      this.loadAll = true;
    }
  },
};
</script>

<style lang="scss">
	.list_wrapper {
		width: 100%;
		height: 100vh;
		background: #f5f5f5;
	
		.list_wrap {
			box-sizing: border-box;
			padding: 32rpx;
			background-color: #fff;
			height: 100%;
			display: flex;
			justify-content: space-between;
			overflow: auto;
			flex-wrap: wrap;
			align-content: flex-start;
		}
	
		.item {
			width: 48%;
			margin-bottom: 24rpx;
	
			.item_top {
				width: 100%;
				height: 420rpx;
				margin-bottom: 24rpx;
				// flex: 1;
				margin-right: 20upx;
				position: relative;
	
				image {
					width: 100%;
					height: 100%;
					display: block;
					border-radius: 24rpx;
				}
	
				.item_title {
					// padding: 0 18rpx 16rpx 18rpx;
					position: absolute;
					left: 0rpx;
					bottom: 0rpx;
					height: 168rpx;
					width: 100%;
					background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
					display: flex;
					align-items: flex-end;
					border-radius: 0 0 24rpx 24rpx;
					text{
						padding: 0 24rpx 16rpx 24rpx;
						word-break: break-all;
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 32rpx;
					}
				}
			}
	
			.item_top:nth-child(2n) {
				margin-right: 0upx;
			}
			
			.item_bot {
				  height: 160rpx;
				  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
				  border-radius: 0rpx 0rpx 24rpx 24rpx;
			  position: absolute;
			  bottom: 0;
			  width: 100%;
			  box-sizing: border-box;
			  padding: 56rpx 24rpx 16rpx;
			  display: flex;
			  flex-direction: column;
			
			  .name {
			    font-size: 32rpx;
			    font-family: Alibaba PuHuiTi 2-75 SemiBold, Alibaba PuHuiTi 20;
			    font-weight: 700;
			    color: #ffffff;
			    // line-height: 44rpx;
			    white-space: nowrap;
			    text-overflow: ellipsis;
			    overflow: hidden;
			  }
			
			  .adr {
			    display: flex;
			    align-items: center;
				margin-top: 16rpx;
			
			    image {
			      width: 24rpx;
			      height: 24rpx;
			      margin-right: 8rpx;
			    }
			
			    .adr-txt {
			      font-size: 24rpx;
			      font-family: PingFang SC-Regular, PingFang SC;
			      font-weight: 400;
			      color: rgba(255, 255, 255, 0.8);
			      line-height: 32rpx;
			    }
			  }
			}
		}
		
	}
// page {
//   background-color: #fff;
//   padding-bottom: constant(safe-area-inset-bottom);
//   padding-bottom: env(safe-area-inset-bottom);
// }

// .attractions-page {
//   .list_wrap {
//     box-sizing: border-box;
//     padding: 24rpx 32rpx 0;
//   }

//   .item {
//     margin-bottom: 24rpx;
//     position: relative;
//   }

//   .item_top {
//     width: 100%;
//     background-color: #f5f5f5;
//     border-radius: 24rpx;

//     image {
//       display: block;
//       width: 100%;
//       height: 360rpx;
//       border-radius: 24rpx;
//     }
//   }

//   .item_bot {
// 	  height: 138rpx;
// 	  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.91) 100%);
// 	  border-radius: 0rpx 0rpx 24rpx 24rpx;
//     position: absolute;
//     bottom: 0;
//     width: 100%;
//     box-sizing: border-box;
//     padding: 0 32rpx 20rpx 12rpx;
//     display: flex;
//     align-items: flex-end;

//     .name {
//       flex: 1;
//       font-size: 32rpx;
//       font-family: Alibaba PuHuiTi 2-75 SemiBold, Alibaba PuHuiTi 20;
//       font-weight: 700;
//       color: #ffffff;
//       // line-height: 44rpx;
//       white-space: nowrap;
//       text-overflow: ellipsis;
//       overflow: hidden;
//     }

//     .adr {
//       margin-left: 32rpx;
//       display: flex;
//       align-items: center;

//       image {
//         width: 24rpx;
//         height: 24rpx;
//         margin-right: 8rpx;
//       }

//       .adr-txt {
//         font-size: 24rpx;
//         font-family: PingFang SC-Regular, PingFang SC;
//         font-weight: 400;
//         color: rgba(255, 255, 255, 0.8);
//         line-height: 32rpx;
//       }
//     }
//   }
// }
</style>
